<template>
  <div class="d-flex jc-center">
    <dv-decoration-10 class="dv-dec-10" />
    <div class="d-flex jc-center">
      <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
      <div class="title">
        <img src="@/assets/logoBg.png" alt="">
        <span class="title-text">中国神话故事平台</span>
        <dv-decoration-6
          class="dv-dec-6"
          :reverse="true"
          :color="['#50e3c2', '#67a1e5']"
        />
      </div>
      <dv-decoration-8
        class="dv-dec-8"
        :reverse="true"
        :color="['#568aea', '#000000']"
      />
    </div>
    <dv-decoration-10 class="dv-dec-10-s" />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
  .d-flex{
    display: flex;
  }
  .dv-dec-10,
  .dv-dec-10-s {
    width: 33.3%;
    height: 5px;
  }
  .dv-dec-10-s {
    transform: rotateY(180deg);
  }
  .dv-dec-8 {
    width: 200px;
    height: 50px;
  }
  .title {
    position: relative;
    width: 500px;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    img {
      position: absolute;
      top: 40%;
      left: 23%;
      width: 30px;
    }
    .title-text {
      font-size: 24px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%);
    }
    .dv-dec-6 {
      position: absolute;
      bottom: -30px;
      left: 50%;
      width: 250px;
      height: 8px;
      transform: translate(-50%);
    }
  }
</style>